<script setup lang="ts">
import { ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import { regionData } from "@/utils/chinaArea";
import { placeOrder } from "@/api/orders";
import { reactive } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const ruleFormRef = ref<FormInstance>();

const formVisible = ref(false);
const formData = ref(props.data);
const formData2 = reactive(props.data);
const handleChange = value => {
  console.log(value);
};
// const palcetest = Data => {
//   axios.post("http://127.0.0.1:8000/orders/", Data);
//   console.log(Data);
// };
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      console.log("formData2:", formData2);
      placeOrder(formData2).then(res => {
        if (res.success) {
          message("提交成功", { type: "success" });
          formVisible.value = false;
          resetForm(formEl);
        }
      });
      // palcetest(formData);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

const emit = defineEmits(["update:visible"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入下单人姓名", trigger: "blur" }],
  company: [{ required: true, message: "请输入公司单位", trigger: "blur" }],
  address: [{ required: true, message: "请选择地址", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }]
};
</script>
<template>
  <el-dialog
    v-model="formVisible"
    title="订单详情"
    :width="750"
    draggable
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="订单人姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="单位" prop="company">
        <el-input v-model="formData.company" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-cascader
          :options="regionData"
          v-model="formData.address"
          @change="handleChange"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="订单类型" prop="order">
        <el-radio-group v-model="formData.order">
          <el-radio label="normal">常规订单</el-radio>
          <el-radio label="urgent">加急订单</el-radio>
          <el-radio label="special">特殊订单</el-radio>
          <!-- <el-radio label="TYPE_A">常规订单</el-radio>
          <el-radio label="TYPE_B">加急订单</el-radio>
          <el-radio label="TYPE_C">特殊订单</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="formData.order === 'special'"
        label="具体日期"
        prop="date"
      >
        <el-date-picker
          v-model="formData.date"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" />
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
